<template>
  <el-aside width="200px" class="imageAside" v-loading="loading">
    <div class="top">
      <AsideList
        v-for="(item, index) in list"
        :key="index"
        :active="activeIndex === index"
        @listclick="hancleListclick(index)"
        @edit="handleEdit(item)"
        @comfirm="handleComfirm(item.id)"
        @click="$emit('index',item.id)"
      >
        {{ item.name }}
      </AsideList>
    </div>
    <div class="bottom flex justify-center items-center">
      <el-pagination
        background
        layout="prev,next"
        :total="total"
        :current-page="currentPage"
        :page-size="limit"
        @current-change="getList"
       
      />
    </div>
  </el-aside>
  <!-- 抽屉组件 -->
  <Formdrawer ref="drawerRef" :title="drawTitle" @onSubmit="handleSubmit">
    <el-form ref="formRef" :model="form" label-width="auto" :rules="rules"> 
        <el-form-item label="分类名称" prop="name">
            <el-input v-model="form.name" placeholder="" />
        </el-form-item>
        <el-form-item label="排序" prop="order">
             <el-input-number v-model="form.order" :min="1" :max="1000" @change="handleChange"/>
        </el-form-item>
    </el-form>
  </Formdrawer>
</template>

<script setup>
import AsideList from "./AsideList.vue";
import {addClass, getImageList,changeClass,deleteClass} from "@/api/image-class";
import { computed, reactive, ref } from "vue";
import Formdrawer from '@/components/Formdrawer.vue';
import { notify } from '@/composible/notify'
import { defineEmits } from "vue";
//获取侧边栏的数据
const list = ref([]);
const activeIndex = ref(0);
//分页
const currentPage = ref(1);
const total = ref(1);
const limit = ref(10);

//加载动画
const loading = ref(false);
function getList(p = null) {
  if (typeof p == "number") {
    currentPage.value = p;
  }
  console.log(p);
  loading.value = true;
  getImageList(currentPage.value)
    .then((res) => {
      list.value = res.list;
      total.value = res.totalCount;
      console.log(total.value);
      console.log(res);
    })
    .finally(() => {
      loading.value = false;
    });
}
getList(1);
//处理列表点击事件
//向外发送index事件获取activeIndex
defineEmits(['index']);
function hancleListclick(index) {
  activeIndex.value = index;
}

//获取抽屉组件
const drawerRef = ref(null);
const formRef = ref(null);
const form = reactive({
    name:"",
    order:50
})


const editId = ref(0);
const drawTitle = computed(() => editId.value ? "修改" : "新增");
//打开抽屉组件
const createDrawer = () => {
  editId.value = 0;
  form.name = "";
  form.order = 50;
  drawerRef.value.open();
};

//编辑事件
const handleEdit = (item)=>
{
  editId.value = item.id;
  form.name = item.name;
  form.order = item.order;
  drawerRef.value.open();
  console.log(item);
 
}

defineExpose({
  createDrawer,
});
//验证表单的方法
const rules = reactive({
    name: [{ required: true, message: '图片名称不能为空', trigger: 'blur' }],
})
//触发表单验证事件
const handleSubmit = (vilate) => {
    formRef.value.validate(vaild => {
        if (!vaild) return;
        console.log("验证通过");
      drawerRef.value.showLoading();
      const fun = editId.value ? changeClass(editId.value,form) : addClass(form);
         fun.then(res => {
           notify('success', drawTitle.value + "分类成功");
           getList(editId ? currentPage.value:1);
            drawerRef.value.close();
        }).finally(() => {
            editId.value = 0; 
            drawerRef.value.closeLoading();
        })

    })
}

//触发删除确认事件
const handleComfirm = (id) => {
  loading.value = true;
  deleteClass(id).then(res => {
    notify("success", "删除成功");
    getList(currentPage.value);
  }).finally(() => {
    loading.value = false;
  })
}



</script>

<style lang="less" scoped>
.imageAside {
  position: relative;
  border-right: solid 1px #999;
}

.imageAside .top,
.imageMain .top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 50px;
  overflow-y: auto;
}

.imageAside .bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 50px;
}

.imageAside .bottom {
  border-top: 1px #999 solid;
}

// 针对Webkit内核浏览器
.imageAside .top::-webkit-scrollbar {
  width: 3px; /* 滚动条宽度 */
}
.imageAside .top::-webkit-scrollbar-track {
  background-color: #f5f5f5; /* 滚动条轨道背景颜色 */
}
.imageAside .top::-webkit-scrollbar-thumb {
  background-color: skyblue; /* 滚动条滑块背景颜色 */
  border-radius: 4px; /* 滑块圆角 */
}
.imageAside .top::-webkit-scrollbar-thumb:hover {
  background-color: #888; /* 鼠标悬停时滑块背景颜色 */
}
</style>